﻿@model XZen.Blogger.Posting
@{
    ViewBag.Title = "EditPosting";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>EditPosting</h2>
<script src="~/Scripts/filedrop.js"></script>
<style type="text/css">
    /***
      Styles below are only required if you're using <iframe> fallback in
      addition to HTML5 drag & drop (only working in Firefox/Chrome).
     ***/

    /* Essential FileDrop zone element configuration: */
    .fd-zone {
        position: relative;
        overflow: hidden;
        /* The following are not required but create a pretty box: */
        width: 15em;
        margin: 0 auto;
        text-align: center;
    }

    /* Hides <input type="file"> while simulating "Browse" button: */
    .fd-file {
        opacity: 0;
        font-size: 118px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        padding: 0;
        margin: 0;
        cursor: pointer;
        filter: alpha(opacity=0);
        font-family: sans-serif;
    }

    /* Provides visible feedback when use drags a file over the drop zone: */
    .fd-zone.over {
        border-color: maroon;
        background: #eee;
    }

    .img-icon {
        width: 100px;
    }
    table.bordered td {
        padding:10px;
        border:1px solid #559988;
    }
</style>


<div id="imgDlg" style="display: none">


    <noscript style="color: maroon">
        <h2>JavaScript is disabled in your browser. How do you expect FileDrop to work?</h2>
    </noscript>



    <!-- A FileDrop area. Can contain any text or elements, or be empty.
         Can be of any HTML tag too, not necessary fieldset. -->
    <div id="zone">     
        <p>Click here to <em>Browse</em>..</p>
    </div>

    <script type="text/javascript">
        // Tell FileDrop we can deal with iframe uploads using this URL:
        var options = { iframe: { url: '/Attachment/Upload/22' } };
        // Attach FileDrop to an area ('zone' is an ID but you can also give a DOM node):
        var zone = new FileDrop('zone', options);

        // Do something when a user chooses or drops a file:
        zone.event('send', function (files) {
            // Depending on browser support files (FileList) might contain multiple items.
            files.each(function (file) {
                // React on successful AJAX upload:
                file.event('done', function (xhr) {
                    var data = $.parseJSON(xhr.responseText);
                    $("#images").append($("<tr/>").html('<td><img  class="img-icon" src="/Content/Uploaded/' + data.Name + '"/></td><td>' + data.Size + '</td>'));
                  
                });

                // Send the file:
                file.sendTo('/Attachment/Upload/22');
            });
        });

        // React on successful iframe fallback upload (this is separate mechanism
        // from proper AJAX upload hence another handler):
        zone.event('iframeDone', function (xhr) {
            var data = $.parseJSON(xhr.responseText);
            $("#images").append($("<tr/>").html('<td><img  class="img-icon" src="/Content/Uploaded/' + data.Name + '"/></td><td>' + data.Size + '</td>'));
         
        });

        // A bit of sugar - toggling multiple selection:
        fd.addEvent(fd.byID('multiple'), 'change', function (e) {
            zone.multiple(e.currentTarget || e.srcElement.checked);
        });

        function showDialog() {
            $("#imgDlg").dialog({ title: "Browse a file to upload.", width: "600", height: "500" });
        }
    </script>
    <hr />

    <table class="bordered" border="1" style="width: 100%;">
        <thead>
            <tr>
                <th>Images</th>
                <th>Size</th>
            </tr>
        </thead>
        <tbody id="images">
        </tbody>
    </table>

</div>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Posting</legend>

        @Html.HiddenFor(model => model.BlogID)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Category)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Category)
            @Html.ValidationMessageFor(model => model.Category)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Body)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Body, new { rows = 15, cols = 60 })
            @Html.ValidationMessageFor(model => model.Body)
        </div>
        <div class="editor-label">
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.ID)
            @Html.HiddenFor(model => model.User)
            @Html.ValidationMessageFor(model => model.User)
            @Html.HiddenFor(model => model.IP)
            @Html.ValidationMessageFor(model => model.IP)
        </div>
        <p>
            <input type="submit" value="Save" />
            <input type="button" id="addImage" onclick="showDialog()" value="AddImage" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to Posting List", "Posting", new { id = Model.BlogID }, null)
</div>


<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>

<script type="text/javascript">
   // $(function () {
        tinymce.init({
            selector: "textarea",
            theme: "modern",
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons template paste textcolor moxiemanager"
            ],
            toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            toolbar2: "print preview media | forecolor backcolor emoticons",
            image_advtab: true,
            templates: [
                { title: 'Test template 1', content: 'Test 1' },
                { title: 'Test template 2', content: 'Test 2' }
            ]
        });

  //  });
</script>



